<template>
  <div class="regiest">
    <div class="reg-box">
      <div class="logo">
        <img src="../../public/imgs/logo-mi.png" alt="" />
      </div>
      <h3 class="title">注册小米账号</h3>
      <div class="reg-form">
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" />
        <!-- <p class="reg-tip" v-if="isWarning">用户名已存在！</p> -->
        <p class="reg-tip">成功注册帐号后，用户名将不能被修改</p>
        <label for="password">密码：</label>
        <input type="text" id="password" v-model="password" />
        <button class="reg-btn" @click="reg">立即注册</button>
      </div>
      <div class="agree">
        <p>
          已阅读并同意：小米
          <a href="javascript;;">用户协议</a>和
          <a href="javascript;;">用户协议</a>
        </p>
      </div>
    </div>
    <reg-footer></reg-footer>
  </div>
</template>

<script>
import RegFooter from '../components/CopyFooter'
export default {
  name: 'order',
  data () {
    return {
      username: '',
      password: '',
      isWarning: false
    }
  },
  components: {
    RegFooter
  },
  methods: {
    // 注册用户
    reg () {
      var email = new Date().getTime() + '@qq.com'
      // this.$router.push('/login')
      this.$http.post('/api/user/register', {
        username: this.username,
        password: this.password,
        email: email
      })
        .then((res) => {
          console.log(res)
          if (res.status === 0) {
            alert('注册成功！')
            console.log(res.status)
            // 将用户名和密码保存到cookie
            this.$cookie.set('username', this.username, { expires: '1M' })
            this.$cookie.set('password', this.password, { expires: '1M' })

            // 跳转到首页
            this.$router.push('/login')
          }
        })
    }
    // 校验用户名
    // validate () {
    //   var email = new Date().getTime() + '@qq.com'
    //   this.$http.post('/api/user/register', {
    //     username: this.username,
    //     password: '123',
    //     email: email
    //   }).then(res => {
    //     if (res.status === 1 && res.msg === '用户名已存在') {
    //       this.isWarning = true
    //     } else {
    //       this.isWarning = false
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" >
.regiest {
  .reg-box {
    width: 786px;
    height: 522px;
    padding: 0 34px 30px;
    background-color: #fff;
    margin: auto;
    font-size: 14px;

    .logo > img {
      display: block;
      width: 48px;
      height: 48px;
      margin: auto;
      margin-bottom: 40px;
    }
    h3.title {
      font-size: 30px;
      font-weight: normal;
      text-align: center;
    }
    .reg-form {
      width: 332px;
      margin: auto;
      padding: 30px 0;
      label {
        display: block;
        padding-bottom: 5px;
        color: #333;
        font-weight: normal;
      }
      input {
        width: 100%;
        height: 40px;
        padding-left: 14px;
        line-height: 40px;
        border: 1px solid #e8e8e8;
        color: #555;
        cursor: pointer;
        margin-bottom: 15px;
        outline: none;
        &.warn {
          border-color: #f00;
        }
      }
      p.reg-tip {
        // color: #f00;
        color: #666;
        line-height: 20px;
        margin-top: -10px;
        margin-bottom: 15px;
      }
      .reg-btn {
        width: 100%;
        height: 42px;
        background-color: #ff6700;
        margin-top: 15px;
        border: 1px solid rgba(186, 186, 186, 0.3);
        color: #fff;
        cursor: pointer;
      }
    }
    .agree {
      color: #9d9d9d;
      padding: 40px 0 0;
      cursor: pointer;
      text-align: center;
      p {
        padding: 10px 0;
        a {
          color: #333;
          font-weight: bold;
          text-decoration: none;
        }
      }
    }
  }
  .copy-footer .footer-box {
    background-color: #f5f5f5;
    padding-top: 10px;
  }
}
</style>
